import React from 'react';
import { ActionButton, PageTable, ModalBox } from '@components';
import PageHeaderLayout from '@layouts/PageHeaderLayout'

export default class extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			confirmLoading: false,
			request: {
				url: '/gateway/PLATFORM-SUPPORT/v1/pt/userInfo/action/search',
				params: {
					ids: '',
					current: 1,
					limit: 30,
					tags: ''
				}
			}
		}
		this.columns = [
			{
				title: '序号',
				dataIndex: 'key',
				// width: '30%',
				align: "center",
				// render: text => <a href="javascript:;">{text}</a>,
			},
			{
				title: '角色名称',
				dataIndex: 'roleName',
				align: "center",
			},
			{
				title: '操作',
				dataIndex: 'operation',
				align: "center",
				width: '25%',
				render: (text, record, index) => this.renderTableButton(text, record, index)
			}
		]
	}
	renderTableButton = (text, record, index) => {
		return (
			<div>
				<ActionButton actionCode="02010102"
					type="primary"
					border={false}
					ghost
					onClick={() => this.edit(record.kid)}>
					编辑
				</ActionButton>
				<ActionButton actionCode="02010103"
					size="small"
					type="primary"
					border={false}
					ghost
					onClick={() => this.remove(record.kid)}>
					删除
				</ActionButton>
			</div>
		)
	}
	remove = async (kid) => {
		this.setState({
			confirmLoading: true
		})
		let resData = await ModalBox.show(RemoveItem, {
			title: '确定删除',
			width: 400,
			maskClosable: false,
			cancelText: '否',
			okText: '是',
			bodyStyle: { 'textAlign': 'center' },
			confirmLoading: this.state.confirmLoading,
		},
			{
				title: "是否确定删除该角色？",
				kid,
			});
		console.log('resData:', resData)
	}
	changeTable = () => {

	}
	add = () => {
		this.openModal();
	}
	edit = (kid) => {
		this.openModal(kid);
	}
	openModal = async (kid = null) => {
		let title = '新增'
		if (kid) {
			console.log('编辑')
			title = '编辑'
		}
		let resData = await ModalBox.show(Form, {
			title,
			width: 800,
			maskClosable: false,
			cancelText: '取消',
			okText: '确认',
		},
			{
				title: "form title",
			});
		console.log('resData:', resData)
	}
	render() {
		const columns = this.columns;
		let { request } = this.state;
		return (
			<PageHeaderLayout title="角色管理">
				<div style={{ textAlign: 'right' }}>
					<ActionButton
						code='02010101'
						icon='plus'
						type="primary"
						onClick={this.add}
					>
						新增
					</ActionButton>
				</div>

				<PageTable
					bordered
					request={request}
					columns={columns}
					pagination={false}
					onChange={this.changeTable}
					style={{ marginTop: '10px' }}
					size="small"
					dataSource={
						[
							{
								key: 1,
								roleName: '超级管理员',
								hasUser: true,
								kid: '1234'
							},
							{
								key: 2,
								roleName: '管理员',
								hasUser: true,
								kid: '5487'
							},
							{
								key: 3,
								roleName: '编辑一部',
								hasUser: true,
								kid: '874125'
							},
							{
								key: 4,
								roleName: '运营一部',
								hasUser: true,
								kid: '879633'
							},
							{
								key: 5,
								roleName: '产品',
								hasUser: false,
								kid: '8569'
							},
							{
								key: 6,
								roleName: '技术',
								hasUser: true,
								kid: '35456'
							},
							{
								key: 7,
								roleName: 'BI',
								hasUser: false,
								kid: '6578'
							},
							{
								key: 8,
								roleName: '编辑二部',
								hasUser: false,
								kid: '53678'
							}
						]
					}
				/>
			</PageHeaderLayout>
		)
	}
}

const Form = (props) => {
	return (
		<div>
			<h3>{props.title}</h3>
			{/* <div>
				<Button type="primary"
					onClick={() => props.onOk('hello,lann')}
					style={{ margin: '0 20px' }}>
					确认
				</Button>
				<Button type="primary"
					onClick={() => props.onCancel()}>
					取消
				</Button>
			</div> */}
		</div>
	)
}
const RemoveItem = (props) => {
	const { title, kid } = props;
	return (
		<div>
			{title}
		</div>
	)
}